<template>
  <div class="home">
    <NavTop />
    <!-- logo图片 -->
    <img src="../assets/kdl.png" alt="" width="100%" style="display: 'block'" />
    <ul>
      <li
        v-for="(item, index) in arr"
        :key="index"
        @click="cutRouter(item.router)"
      >
        <div class="imgs">
          <img :src="item.img_url" alt="" />
        </div>
        <h3>{{ item.title }}</h3>
        <b>{{ item.english }}</b>
      </li>
    </ul>
    <!-- 底部  -->
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src

import NavTop from "@/components/NavTop";

export default {
  data() {
    return {
      active: 0,
      bool: true,
      arr: [
        {
          img_url: require("@/assets/我的客户.png"),
          title: "我的客户",
          english: "MY Clients",
        },
        {
          img_url: require("@/assets/客户关怀.png"),
          title: "客户关怀",
          english: "Costomer",
        },
        {
          img_url: require("@/assets/消息中心.png"),
          title: "消息中心",
          english: "Costomer",
        },
        {
          img_url: require("@/assets/物流单.png"),
          title: "物流单",
          english: "Logistics",
        },
      ],
    };
  },
  methods: {
    cutRouter(val) {
      this.$router.push(val);
    },
    onClickLeft() {
      console.log(1);
      this.$router.back();
    },
    onClickRight() {
      this.$toast("此处应该返回首页");
    },
  },
  created() {
    let token = localStorage.getItem("token");
    if (!token) {
      this.$toast("先登录");
      setTimeout(() => {
        this.$router.push("/login");
      }, 1000);
    }
  },
  components: {
    // 头部导航
    NavTop,
  },
};
</script>
<style lang="less" scoped>
.home {
  background-color: #efefef;
  padding-bottom: 0.3rem;
  box-sizing: border-box;
}
ul {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  margin: 0.2rem auto;
  li {
    width: 46%;
    margin: 0.05rem 0.05rem;
    text-align: center;
    background-color: #fff;
    height: 2rem;
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    flex-wrap: wrap;
    text-align: center;
    align-content: center;
    .imgs {
      width: 0.6rem;
      height: 0.5rem;
      margin: 0.35rem auto;
      display: flex;
      /* background-color: pink; */
      align-items: center;
    }
    img {
      width: 100%;
    }
  }
  h3 {
    font-size: 0.2rem;
  }
  b {
    padding-top: 0.1rem;
    box-sizing: border-box;
    font-size: 0.12rem;
  }
}
</style>
